<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>

    <body>
        <div class="div_btn"><button id="btn" onclick="window.location.href='/'">返回首页</button></div>
        
        <hr/>
        <div class="center-div" >
            <div><h2>Redis与数据库的交互[幂等、分布式锁]</h2></div>
            
            <div>
                <table>
                    <tr>
                        <td>昵称：</td>
                        <td><input type="text" id="nikoname" name="nikoname" value="安澜"></td>
                    </tr>
                    <tr>
                        <td>年龄：</td>
                        <td><input type="text" id="age" name="age" value="18"></td>
                    </tr>
                    <tr>
                        <td>性别：</td>
                        <td>
                            <input type="radio" id="male" name="sexy" value="男" checked>
                            <label for="male">男</label>
                            <input type="radio" id="female" name="sexy" value="女">
                            <label for="female">女</label>
                        </td>
                    <tr>
                        <td><label for="hobby">爱好：</label></td>
                        <td>                 
                            <select id="hobby" name="hobby">
                                <option value="sing">唱</option>
                                <option value="jump">跳</option>
                                <option value="rap">rap</option>
                                <option value="basketball" selected>篮球</option>
                                <option value="swimming">游泳</option>
                                <option value="trip">旅游</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>宠物：</td>
                        <td>
                            <input type="checkbox" id="pony" name="pet" value="polly">
                            <label for="polly">波利</label>
                            <input type="checkbox" id="tom" name="pet" value="tom" checked>
                            <label for="tom">汤姆</label>
                            <input type="checkbox" id="jerry" name="pet" value="jerry">
                            <label for="jerry">杰瑞</label>
                            <input type="checkbox" id="spike" name="pet" value="spike">
                            <label for="spike">斯派克</label>
                        </td>
                    </tr>
                    <tr>
                        <td><button onclick="idempotent()">提交(幂等)</button></td>
                        <td><button onclick="lua_lock()">提交(lua分布式锁)</button></td>                   
                    </tr>
                </table>     
            </div>            
        </div>
  
        
    </body>

   <script type="text/javascript">

        //表单提交
        function idempotent(){
            // 获取选中的复选框值
            var pet = '';
            document.querySelectorAll('input[name="pet"]:checked').forEach(function(checkbox) {
                //formData.pet.push(checkbox.value);
                pet = checkbox.value +','+ pet;
            });

            // 获取表单数据
            var formData = {
                nikoname: document.getElementById('nikoname').value,
                age: document.getElementById('age').value,
                sexy: document.querySelector('input[name="sexy"]:checked').value,
                hobby: document.getElementById('hobby').value,
                pet: pet.slice(0,-1)
                //pet = pet.substring(0,pet.length-1);
                
            };

            // 发送 AJAX 请求
            ajaxRequest('idempotent_add', 'POST', formData, function(response) {
                if (response.code == 200) {
                    console.log(response.msg);
                    alert(response.msg);
                } else if(response.code == 666){
                    alert(response.msg);
                }else{
                    alert(response.msg);
                }
            });
        };
        
        //lua脚本分布式锁
        function lua_lock(){
            // 获取选中的复选框值
            var pet = '';
            document.querySelectorAll('input[name="pet"]:checked').forEach(function(checkbox) {
                //formData.pet.push(checkbox.value);
                pet = checkbox.value +','+ pet;
            });

            // 获取表单数据
            var formData = {
                nikoname: document.getElementById('nikoname').value,
                age: document.getElementById('age').value,
                sexy: document.querySelector('input[name="sexy"]:checked').value,
                hobby: document.getElementById('hobby').value,
                pet: pet.slice(0,-1)         
            };

            // 发送 AJAX 请求
            ajaxRequest('lua_lock', 'POST', formData, function(response) {
                if (response.code == 200) {
                    alert(response.msg);
                } else if(response.code == 666){
                    alert(response.msg);
                }else{
                    alert(response.msg);
                }
            });
        }
        
        //原生Ajax请求定义

        function ajaxRequest(url, method, data, callback) {  

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            // 定义请求的类型、URL以及是否异步处理
            xhr.open(method, url, true);

            // 设置请求头，指定发送的数据类型为JSON
            xhr.setRequestHeader('Content-Type', 'application/json');
            //laravel框架需要设置csrf 防渗透验证
            var csr = document.getElementsByName('csrf-token')[0].getAttribute('content');
            xhr.setRequestHeader('X-CSRF-TOKEN', csr);

            // 定义请求完成后的回调函数
            xhr.onload = function () {
                if (xhr.status == 200 && xhr.readyState == 4) {
                    // 请求成功，处理返回的数据 
                    // 将响应数据传递给回调函数进行处理                       
                    callback(JSON.parse(xhr.responseText));
                    //console.log('Response:', xhr.responseText);
                    
                } else {
                    // 请求失败，处理错误
                    console.error('Request failed with status:', xhr.status);
                }
            };

            // 定义请求出错时的回调函数
            xhr.onerror = function () {
                console.error('Request failed');
            };
            
            // 发送请求，将数据转换为JSON格式
            xhr.send(JSON.stringify(data));

        }
        
   </script> 
    <style>
        #keys-container {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
        #btn {
            position: absolute; /* 绝对定位 */
            right: 20px; /* 距离右侧 20px */
        }
        .div_btn{
            height: 35px;
        }
        
        #keys-rank {
            border: 1px solid #ccc; /* 设置边框 */
            height: 200px; /* 设置高度 */
            overflow-y: auto; /* 如果内容超出高度，显示滚动条 */
            padding: 10px; /* 设置内边距 */
        }
        
        .center-div {
            width: 50%; /* 或其他宽度 */
            margin-left: auto;
            margin-right: auto; /* 这会使水平居中 */
        }
    </style>

</html>



